<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Boilerplate</title>
	<meta name="author" content="Nathan Borror">
  <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
  <!--[if lte IE 6]><link rel="stylesheet" href="stylesheets/lib/ie6.css" type="text/css" media="screen" charset="utf-8"><![endif]-->
</head>
<body>

<div id="page">
  <div id="header">
    <h1>Boilerplate usage</h1>
  </div>
  
  <div id="navigation">
    <ul class="tabs">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Consectetur</a></li>
      <li><a href="#">Eiusmod</a></li>
    </ul>
  </div>
  
  <div id="body" class="wrapper">
    <div id="introduction">
      <h2>Paragraphs</h2>
      <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p><strong class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</strong> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <a href="#">nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      
      <h3>Unordered lists</h3>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
        <li>Ut enim ad minim veniam</li>
      </ul>
      
      <h3>Ordered lists</h3>
      <ol>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore</li>
        <li>Et dolore magna aliqua</li>
      </ol>
      
      <h3>Definition lists</h3>
      <dl>
        <dt>Lorem ipsum dolor sit amet</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd>
        
        <dt>Ut enim ad minim veniam</dt>
        <dd>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </dd>
        
        <dt>Duis aute irure dolor</dt>
        <dd>In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </dd>
        
        <dt>Excepteur sint occaecat</dt>
        <dd>Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
      </dl>
      
      <h3>Blockquotes</h3>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </blockquote>
      
      <h3>Tables</h3>
      <table>
        <tr>
          <th>Item</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor</td>
          <td>1</td>
          <td>$10.00</td>
        </tr>
        <tr>
          <td>Adipisicing elit</td>
          <td>2</td>
          <td>$12.00</td>
        </tr>
      </table>
    </div>
    <div id="resources">
      <h3>Commodo consequat</h3>
      <ul>
        <li><a href="#">Consectetur adipisicing elit</a> sed do eiusmod tempor incididunt ut labore.</li>
        <li><a href="#">Quis nostrud exercitation</a> ullamco laboris nisi ut aliquip</li>
      </ul>
      
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
        <li>Ut enim ad minim veniam</li>
      </ul>
      
      <ol>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore</li>
        <li>Et dolore magna aliqua</li>
      </ol>
    </div>
  </div>
  
  <div id="footer">
    <ul class="tabs">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Consectetur</a></li>
      <li><a href="#">Eiusmod</a></li>
    </ul>
    
    <p class="quiet"><small>Creative Commons License</small></p>
  </div>
</div>

</body>
</html>
